<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar title="个人信息" left-arrow @click-left="$router.back()" />
    <!-- 信息展示 -->
    <van-cell @click="$refs.input.click()" title="头像">
      <van-image round width="0.8rem" height="0.8rem" :src="userInfo.photo">
      </van-image>
    </van-cell>
    <van-cell @click="isShowNcname = true" title="昵称" is-link>
      <span>{{ userInfo.name }}</span>
    </van-cell>
    <van-cell @click="isShowGender = true" title="性别" is-link>
      <span>{{ userInfo.gender ? '女' : '男' }}</span>
    </van-cell>
    <van-cell @click="isShowBirthday = true" title="生日" is-link>
      <span>{{ userInfo.birthday }}</span>
    </van-cell>
    <!-- 弹层 -->
    <!-- 头像弹层 -->
    <input
      @change="OnSlected"
      type="file"
      hidden
      ref="input"
      accept=".jpg,.png,.svg"
    />
    <van-popup
      v-model="isShowAvatar"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <updateAvatar
        v-if="isShowAvatar"
        @close="isShowAvatar = false"
        :photo="photo"
        @update-photo="userInfo.photo = $event"
      ></updateAvatar>
    </van-popup>
    <!-- 昵称弹层 -->
    <van-popup
      v-model="isShowNcname"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <update-nick-name
        v-if="userInfo.name && isShowNcname"
        @close="isShowNcname = false"
        :name.sync="userInfo.name"
      ></update-nick-name>
    </van-popup>

    <!-- 性别弹出层 -->
    <van-popup
      v-model="isShowGender"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <update-gender
        v-if="userInfo.name && isShowGender"
        :gender.sync="userInfo.gender"
        @close="isShowGender = false"
      ></update-gender>
    </van-popup>

    <!-- 生日弹出层 -->
    <van-popup
      v-model="isShowBirthday"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <update-birthday
        v-if="userInfo.birthday && isShowBirthday"
        @close="isShowBirthday = false"
        v-model="userInfo.birthday"
      ></update-birthday>
    </van-popup>
  </div>
</template>

<script>
import updateNickName from './components/updateNikename.vue'
import updateGender from './components/updateGender.vue'
import updateBirthday from './components/updateBirthday.vue'
import updateAvatar from './components/updateAvatar.vue'
import { getUserProfileAPI } from '@/api'
import { ResultBase64 } from '@/utils'
export default {
  name: 'User',
  components: {
    updateNickName,
    updateGender,
    updateBirthday,
    updateAvatar
  },
  props: {},
  data() {
    return {
      // 用户个人信息
      userInfo: {},
      // 控制昵称弹窗
      isShowNcname: false,
      // 性别弹出层
      isShowGender: false,
      // 生日弹出层
      isShowBirthday: false,
      // 头像弹层
      isShowAvatar: false,
      // 存储图片路径
      photo: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getUserProfile()
  },
  methods: {
    //  获取用户个人信息
    async getUserProfile() {
      const { data } = await getUserProfileAPI()
      this.userInfo = data.data
    },
    // 选择图片后触发change事件
    async OnSlected() {
      const file = this.$refs.input.files[0]
      // 需要读取获取的图片
      const base64 = await ResultBase64(file)
      this.photo = base64
      this.isShowAvatar = true
      // 每次打开弹层后手动将input的value清空
      this.$refs.input.value = ''
    }
  }
}
</script>

<style scoped lang="less">
:deep(.van-nav-bar__content) {
  background-color: #3296fa;
  .van-nav-bar__title {
    color: #fff;
  }
  .van-icon-arrow-left {
    color: #fff;
  }
}
</style>
